<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./font/iconfont.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            user-select: none;
            /*初始化页面*/
        }

        body {
            background: url(./imgs/01.jpg) no-repeat;
            /*引入背景图片*/
            background-size: cover;
            /*背景平铺*/
        }

        ul {
            list-style: none;
        }

        #wrap {/*大盒子样式*/
            width: 400px;
            margin: 200px auto;
            user-select: none;
        }

        #wrap ul {
            display: flex;
        }
        #wrap li {
            margin: 0 3px;
        }

        #wrap li:not(.dot) { /*数字盒子样式*/
            width: 100%;
            height: 62px;
            background: linear-gradient(to bottom,rgba(77, 80, 82, 0.80) 50%, rgba(70,75,85,0.85) 50%);
            border-radius: 10px;
            line-height: 62px;
            text-align: center;
            color: #fff;
            font-size: 26px;
        }

        #wrap .dot { /*点盒子的样式*/
            width: 20px;
            height: 62px;
            line-height: 62px;
            text-align: center;
            font-size: 26px;
            font-weight: bolder;
            color: rgba(77, 80, 82, 0.85);
        }

        .box {
            width: 350px;
            height: 250px;
            position: absolute;
            /*绝对定位*/
            top: 55%;
            left: 50%;
            transform: translate(-50%, -50%);
            /*上面三条移动body元素*/
            text-align: center;
            /*文本居中*/
            background: rgba(77, 80, 82, 0.88);
            /**/
            border-radius: 4%;
        }

        h1,
        .upper,
        .below {
            margin-top: 25px;
        }

        h1{
            color: lightpink;
        }

        .box input,
        button{
            color: white;
        }

        .upper,
        .below,
        button {
            cursor: pointer;
            /*鼠标变小手*/
        }

        @font-face {
            /*阿里图标*/
            font-family: 'iconfont';
            src: url('iconfont.eot');
            src: url('iconfont.eot?#iefix') format('embedded-opentype'),
            url('iconfont.woff2') format('woff2'),
            url('iconfont.woff') format('woff'),
            url('iconfont.ttf') format('truetype'),
            url('iconfont.svg#iconfont') format('svg');
        }

        .box .iconfont {
            /*阿里图标*/
            font-family: "iconfont" !important;
            font-size: 16px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            font-size: 2em;
            color: #fff;
            vertical-align: middle;
        }

        .box .upper i::before {
            /*添加伪元素并设置样式*/
            overflow: hidden;
            position: absolute;
            height: 0;
            color: skyblue;
            content: "\e66b";
            border-bottom: 2px solid skyblue;
            transition: 0.3s;
        }

        .box .upper i:hover::before {
            /*鼠标悬浮显示伪元素样式*/
            height: 32px;
            transition: 0.3s;
        }

        .box .below i::before {
            overflow: hidden;
            position: absolute;
            height: 0;
            color: gold;
            content: "\e605";
            border-bottom: 2px solid gold;
            transition: 0.3s;
        }

        .box .below i:hover::before {
            height: 32px;
            transition: 0.3s;
        }


        .box input {
            /*设置输入框样式*/
            width: 130px;
            height: 20px;
            line-height: 20px;
            font-size: 15px;
            border: 0;
            border-bottom: 2px solid #ccc;
            outline: none;
            background: transparent;
            padding: 5px 10px;
        }

        input::-webkit-input-placeholder {
            /*设置输入框默认字体颜色*/
            color: #fff;
        }

        .box button {
            /*设置按钮样式*/
            width: 200px;
            height: 30px;
            transform: translateY(65%);
            font-size: 18px;
            letter-spacing: 5px;
            border: 0;
            border-radius: 30px;
            outline: none;
            background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4,
            #f441a5, #ffeb3b, #03a9f4);
            /*设置背景颜色 左右渐变*/
            background-size: 400%;
            /*背景大小*/
            transition: 0.2s;
        }

        .box button::before {
            /*添加伪元素*/
            content: '';
            /*伪元素内容*/
            position: absolute;
            /*绝对定位*/
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            /*伪元素居中*/
            z-index: -1;
            background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4,
            #f441a5, #ffeb3b, #03a9f4);
            background-size: 400%;
            filter: blur(20px);
            /*过渡：模糊*/
            opacity: 0;
            /*透明度*/
            transition: 0.2s;
            /*过渡时间*/
        }

        .box button:hover {
            width: 210px;
            height: 33px;
            font-size: 20px;
            transition: 0.2s;
            animation: animate 8s linear infinite;
            /*动画: 名称 时间 线性 循环*/
        }

        @keyframes animate {

            /*设置动画*/
            0% {
                background-position: 0%;
                /*修改背景定位，实现渐变色炫光*/
            }

            50% {
                background-position: 100%;
            }

            100% {
                background-position: 0%;
            }
        }

        .box button:hover::before {
            filter: blur(20px);
            opacity: 1;
            transition: 0.2s;
            animation: animate 8s linear infinite;
            /*注意动画名称统一*/
        }

        .yiJu{
            position: absolute;
            /*绝对定位*/
            top: 80%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .yiJu li{
            display: flex;
            height:80px;
            line-height: 80px;
        }

        .yiJu li span{
            font-size: 28px;
            font-weight: bold;
            color: snow;
        }

        .yiJu li input{
            display: none;
            width: 200px;
            height: 50px;
            margin-top: 15px;
        }

        .yiJu li p{
            width:100px;
            height:25px;
            margin-left: 20px;
            border-radius: 25px;
            margin-top: 30px;
            font-size: 18px;
            line-height: 25px;
            text-align: center;
            cursor: pointer;
            color: white;
            background-color: rgba(77, 80, 82, 0.88);
        }

        .yiJu li p.qr{
            display: none;
        }

        .yiJu li.active p.yj{ /*给p标签的父元素里添加一个类名active，当有这个类名的时候，每日一句隐藏*/
            display: none;
        }

        .yiJu li.active p.qr{ /*给p标签的父元素里添加一个类名active，当有这个类名的时候，确认出现*/
            display: block;
        }

        .yiJu li.active span{
            display: none;
        }

        .yiJu li.active input{
            display: block;
        }
    </style>
</head>

<body>
<div id = "wrap">
    <ul>
        <li class = "hours">0</li>
        <li class = "hours">0</li>
        <li class = "dot">:</li>
        <li class = "minutes">0</li>
        <li class = "minutes">0</li>
        <li class = "dot">:</li>
        <li class = "seconds">0</li>
        <li class = "seconds">0</li>
    </ul>
</div>


<div class="box">
    <h1>你好吖</h1>
    <div class="upper">
        <i class="iconfont">&#xe66b;</i>
        <input type="text" placeholder="Username">
    </div>
    <div class="below">
        <i class="iconfont">&#xe605;</i>
        <input type="password" placeholder="Password">
    </div>
    <button>登录</button>
</div>

<ul class = "yiJu">
    <li>
        <span>但行前路，莫问前程</span>
        <input type = "text" value = "">
        <p class = "yj">每日一句</p>
        <p class = "qr">确定</p>
    </li>
</ul>
</body>

<script>
    let li = document.querySelectorAll("#wrap li:not(.dot)") //反选，选中除了类名为.dot的li

    //先获取到当前的时间 在定时器中使用window.onload就可以立马刷新时间
    setInterval(window.onload = function (){

        //获取当前时间
        let date = new Date()

        //获取时分秒
        let h = date.getHours() //时
        let m = date.getMinutes() //分
        let s = date.getSeconds() //秒

        //将获取的时分秒分别传入补零函数进行格式统一并重新赋值
        h = toTwo(h)
        m = toTwo(m)
        s = toTwo(s)

        //将格式统一后的数值放入一个字符串中
        let clockStr = h + m + s

        //用一个for循环将字符串每一位数值与li标签每一位一一对应
        for(let i = 0;i < clockStr.length;i++){
            li[i].innerHTML = clockStr[i] //li列表中每一位对应clockStr中的每一位
        }

    },1000) //每隔1秒执行一次获取当前时间

    //各位补零函数
    function toTwo(number){ //接收一个参数数字
        if(number < 10){
            return "0" + number
        }else{
            return "" + number
        }
        //如果用三目运算符表示上面条件判断代码
        //return (number < 10 ? "0" : "") + number
    }

    let btn = document.querySelector("button")
    btn.onclick = function (){
        alert("笨蛋，真以为能登录吗")
    }

    //每日一句模块
    let li1 = document.querySelector(".yiJu li")
    let span = document.querySelector(".yiJu li span")
    let input = document.querySelector(".yiJu li input")
    let yj = document.querySelector(".yiJu li .yj")
    let qr = document.querySelector(".yiJu li .qr")
    console.log(li1,span,input,yj,qr)

    yj.onclick = function (){

        //点击每日一句按钮就给li1添加类名active
        li1.classList.add("active")

        //将span里面的默认内容赋值给input
        //input.value = span.innerText

    }

    qr.onclick = function (){

        //点击确认按钮就给li1移除类名active
        li1.classList.remove("active")

        //将input里面的内容赋值给span
        span.innerText = input.value
    }
</script>

</html>